let echarts = require("echarts");
import elementResizeDetectorMaker from "element-resize-detector";

// 根据不同分辨率按照比例缩放
const setRadio1920 = () => {
	let win = document.documentElement.clientWidth;
	let ratio = win <= 1920 ? 1 : win / 1920;
	window.addEventListener("resize", () => {
		win = document.documentElement.clientWidth;
		ratio = win <= 1920 ? 1 : win / 1920;
	});
	return ratio;
}
let getRadio = setRadio1920();

const tooltipStyle = {
  backgroundColor: "rgba(3, 15, 46, .8)", //tooltip背景色
  borderColor: "rgba(3, 15, 46, .5)", //tooltip边框颜色
  borderWidth: 1,
  textStyle: {
    color: "#fff",
  },
};

let textStyle = {
	color: "rgba(207, 218, 229, 1)",
	fontSize: 13,
	fontFamily: "SourceHanSansSC-Regular",
};

// 监听窗口变化，图表随之改变
export const resizeChart = (chartWrap) => {
  let erd = elementResizeDetectorMaker();
  erd.listenTo(chartWrap._dom, (ele) => {
    chartWrap.resize();
  });
  // window.addEventListener("resize", () => {
  //   chartWrap.resize();
  // });
};
// 饼图配置
export const pieOptions = (options) => {
  return {
    tooltip: {
      show: options.isShowTooltip,
      trigger: "item",
      ...tooltipStyle,
    },
    legend: {
			show: options.legend,
			orient: options.orient,
			top: options.legendTop,
			left: options.legendLeft,
			icon: options.icon,
			itemWidth: 10 * getRadio,
			itemHeight: 2 * getRadio,
			itemGap: options.itemGap,
			backgroundColor: options.legendBack,
			padding: [10, 20, 10, 20],
			textStyle,
			formatter: (param) => {
				let obj = options.data.filter(item => item.name === param);
				let total = options.data.map(item => item.value).reduce((acc, cur) => acc + cur);

				return param + "  " + obj[0].percent
			}
    },
    series: [
      {
        name: options.name,
        type: "pie",
				minAngle: 5,
        radius: options.radius,
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          // borderRadius: 0,
          // borderColor: options.borderColor,
          // borderWidth: 4,
          color: (params) => options.colors[params.dataIndex],
        },
				label: {
					formatter: "{a| } {b|{b}}\n{d|{c}次}",
					rich: {
						a: {
							width: 8,
							height: 8,
							borderRadius: 6,
							verticalAlign: "bottom",
							backgroundColor: "inherit",
						},
						d: {
							fontSize: 14,
							padding: [14, 0, 0, 12],
							color: "inherit",
						},
						b: {
							fontSize: 14,
							color: "#fff",
							padding: [20, 0, 0, 0],
						},
					},
					alignTo: "labelLine",
					lineHeight: 24,
					edgeDistance: 20,
				},
				labelLine: {
					length: 10,
					length2: 15,
					maxSurfaceAngle: 40,
				},
        data: options.data,
      },
    ],
  };
};
// 饼、柱联动图
export const PieBarOptions = (options) => {
  let series =
    options.data.currentData && options.data.currentData.length
      ? options.data.currentData.map((item) => {
          return {
            ...item,
            type: "bar",

            barWidth: 20,
            backgroundStyle: {},
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: item.color[0],
                  },
                  {
                    offset: 1,
                    color: item.color[1],
                  },
                ],
                false
              ),
            },
            label: {
              show: false,
              fontSize: 14,
              color: "rgba(198,211,236)",
              position: "top",
            },
            data: item.data,
          };
        })
      : [];

  series.push({
    // name: "",
    type: "pie",
    radius: [50, 70],
    center: ["50%", "50%"],
    width: "60%",
    color: options.pieColor,
    label: {
      formatter: "{a| } {b|{b}}\n{d|{c}次}",
      rich: {
        a: {
          width: 8,
          height: 8,
          borderRadius: 6,
          verticalAlign: "bottom",
          backgroundColor: "inherit",
        },
        d: {
          fontSize: 14,
          padding: [14, 0, 0, 12],
          color: "inherit",
        },
        b: {
          fontSize: 14,
          color: "#fff",
          padding: [20, 0, 0, 0],
        },
      },
      alignTo: "labelLine",
      lineHeight: 24,
      edgeDistance: 20,
    },
    labelLine: {
      length: 8,
      length2: 10,
      maxSurfaceAngle: 40,
    },
    roseType: "area",
    itemStyle: {
      borderRadius: 0,
    },

    //
    // name: "Nightingale Chart",
    // type: "pie",
    // // selectedMode: "single",
    // radius: [50, 70],
    // center: ["55%", "50%"],
    // width: "50%",
    // label: {
    //   show: true,
    //   position: "outer",
    //   // alignTo: "labelLine",
    //   bleedMargin: 5,
    //   color: "white",
    // },
    // labelLine: {
    //   length: 15,
    //   length2: 0,
    //   maxSurfaceAngle: 50,
    // },
    // roseType: false,
    // itemStyle: {
    //   borderRadius: 0,
    // },
    data: options.data.pieData,
  });

  return {
    xAxis: {
      type: "category",
      splitLine: { show: false },
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
    },
    yAxis: {
      type: "value",
      splitLine: { show: false },
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
    },
    grid: {
      top: 50,
      width: 100,
      bottom: "15%",
      left: "60%",
      containLabel: true,
    },
    legend: {
      orient: "vertical",
      bottom: "center",
      right: "5%",
      icon: "circle",
      itemWidth: 8,
      itemHeight: 8,
      formatter: function (params) {
        if (options.data.currentData) {
          for (let i = 0; i < options.data.currentData.length; i++) {
            if (params === options.data.currentData[i].name) {
              return (
                "{d|" +
                params +
                "}{b|" +
                options.data.currentData[i].data[0] +
                "}{unit|" +
                "次}"
              );
            }
          }
        }
      },
      textStyle: {
        color: "inherit",
        fontSize: 12,
        rich: {
          d: {
            fontSize: 14,
            color: "#fff",
            padding: [0, 0, 0, 15],
          },
          b: {
            fontSize: 14,
            color: "#8bfffa",
            fontWeight: "bold",
            padding: [0, 15, 0, 15],
          },
          unit: {
            fontSize: 14,
            color: "#fff",
          },
        },
      },
      data: options.data.currentData,
    },
    series: [...series],
  };
};
// 玫瑰图
export const rosePieOptions = (options) => {
  return {
    title: {
			show: options.text,
      text: options.text ? options.text : '',
      subtext: options.subtext + options.unit,
      left: "center",
      top: options.textTop,
      textStyle: {
        color: "white",
        fontSize: 12,
      },
      subtextStyle: {
        fontSize: 14,
        fontWeight: "bold",
        color: "#2dfefe",
      },
    },
    grid: options.grid,
    xAxis: {
      type: "category",
      splitLine: { show: false },
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
    },
    yAxis: {
      type: "value",
      splitLine: { show: false },
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [40, 80],
        center: options.center,
        color: options.pieColor,
        label: {
          formatter: "{a| } {b|{b}}\n{d|{c}次}",
          rich: {
            a: {
              width: 8,
              height: 8,
              borderRadius: 6,
              // verticalAlign: "bottom",
              backgroundColor: "inherit",
            },
            d: {
              fontSize: 14,
              padding: [0, 0, 0, 12],
              color: "inherit",
            },
            b: {
              fontSize: 14,
              color: "#fff",
              padding: [0, 0, 0, 0],
            },
          },
          alignTo: "labelLine",
          lineHeight: 20,
          edgeDistance: 10,
        },
        labelLine: {
          length: 15,
          length2: 40,
          maxSurfaceAngle: 30,
        },
        roseType: "area",
        itemStyle: {
          borderRadius: 0,
        },
        data: options.data,
      },
    ],
  };
};
//柱状图配置
export const barOptions = (options) => {
  let series =
    options.datas &&
    options.datas.map((item) => {
      return {
        ...item,
        name: item.name,
        type: "bar",
        barWidth: item.barWidth || 20,
        // showBackground: true,
        backgroundStyle: {
          // color:'rgba(255, 255, 255, 0.4)'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: item.color[0],
              },
              {
                offset: 1,
                color: item.color[1],
              },
            ],
            false
          ),
          // borderColor: item.borderColor,
          // borderWidth: 1,
        },
        label: {
          show: false,
          fontSize: 14,
          color: "rgba(198,211,236)",
          position: "top",
        },
        data: item.data,
      };
    });
  return {
    legend: {
      show: true,
      top: "5%",
      left: "center",
      textStyle: {
        color: "#fff",
      },
    },
    // 直角坐标系内绘图网格
    grid: { ...options.grid },
    // 提示框组件
    tooltip: {
      trigger: "axis", //触发类型,axis:坐标轴触发
      axisPointer: {
        //坐标轴指示器配置项
        type: "shadow", //指示器类型:line、shadow、none、cross
      },
      backgroundColor: "rgba(50,50,50,0.7)", //提示框浮层的背景颜色
      borderColor: "#fff", //提示框浮层的边框颜色
      textStyle: {
        color: "#fff",
        fontSize: "15",
      },
    },
    // x 轴设置
    xAxis: [
      {
        type: "category",
        name: "", //X轴名称
        nameLocation: "end", //X轴名称位置
        nameTextStyle: {
          //X轴名称样式
          color: "#fff",
          fontWeight: "bold",
        },
        nameGap: 10, //X轴名称与轴线之间的距离
        nameRotate: 0, //坐标轴名称旋转
        axisLabel: {
          //X轴类目名称样式
          color: "rgba(198,211,236)",
          fontSize: 14,
          rotate: options.rotate,
        },
        axisLine: {
          //X轴轴线设置
          show: true,
          lineStyle: {
            color: "rgba(198,211,236)",
            width: 1,
          },
        },
        axisTick: {
          //X轴刻度相关设置
          show: false,
        },
        splitLine: {
          // 横向分隔线
          show: false,
        },
        // 类目数据
        data: options.xAxis,
      },
      {
        type: "category",
        show: false,
      },
    ],
    // y轴设置
    yAxis: [
      {
        type: "value",
        position: "left",
        name: options.yAxisName,
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          fontWeight: "bold",
        },
        axisLine: {
          //y轴轴线设置
          show: true,
          lineStyle: {
            color: "rgba(198,211,236)",
          },
        },
        axisLabel: {
          //y轴刻度标签
          formatter: "{value}",
          inside: false, //刻度标签是否朝内，默认朝外
          textStyle: {
            color: "rgba(198,211,236)",
            fontSize: 14,
          },
        },
        axisTick: {
          //刻度设置
          show: false,
        },
        splitLine: {
          //纵向分隔线
          show: false,
          lineStyle: {
            color: "rgba(137, 196, 232, 0.13)",
          },
        },
      },
    ],
    series: [...series],
  };
};
// 横向柱形图
export const hBarOptions = (options) => {

	let series = options.data.map(item => {
		return {
			type: "bar",
			name: item.name,
			barWidth: options.barWidth,
			stack: item.stack,
			legendHoverLink: false,
			symbolRepeat: true,
			silent: true,
			showBackground: true,
			itemStyle: {
				color: typeof item.color === 'string' ? item.color :{
					type: "linear",
					x: 0,
					y: 0,
					x2: 1,
					y2: 0,
					colorStops: [
						{
							offset: 0,
							color: item.color[0], // 0% 处的颜色
						},
						{
							offset: 1,
							color: item.color[1], // 100% 处的颜色
						},
					],
				},
			},
			data: item.data,
			z: 1,
		}
	});



  return {
    title: options.echartTitle ? options.echartTitle : {},
		tooltip: {
			confine: true,
			show: true,
			showContent: true,
			textStyle: {
				color: "#fff",
			},
			position: options.tooltipPosition ? function (point, params, dom, rect, size) {
				return [point[0] - 70, point[1] - 190];
			} : null,
			enterable: true,
			hideDelay: 200,
			trigger: "axis", // 有修饰的柱形图，需要区别无效的数据 axis都显示  item 显示一个
			backgroundColor: "rgba(3, 15, 46, .8)", //tooltip背景色
			borderColor: "rgba(3, 15, 46, .5)", //tooltip边框颜色
			borderWidth: 1,
			extraCssText: 'z-index: 99',
			axisPointer: {
				type: "shadow"
			},
		},
		legend: {
			orient: "horizontal",
			show: true,
			itemGap: 10,
			left: "center",
			itemWidth: 12,
			itemHeight: 6,
			textStyle: {
				color: "#e2e2e2",
				fontSize: 12,
				fontFamily: "Noto Sans",
			},
		},
    xAxis: {
      type: "value",
      name: options.xAxisName ? options.xAxisName : "",
      nameLocation: options.nameLocationX,
      nameTextStyle: {
        verticalAlign: "bottom",
        height: 20,
      },
      position: options.xAxisPosition ? options.xAxisPosition : "",
      splitLine: {
        show: true,
				lineStyle: {
					color: "rgba(255, 255, 255, 0.3)",
				},
      },
      axisLabel: {
        show: options.xAxisAxisLine,
        color: "#e2e2e2",
        fontSize: 12,
      },
      axisTick: {
        show: false,
      },
      axisLine: options.xAxisAxisLine
        ? { show: true, lineStyle: { color: "rgba(255, 255, 255, 0.3)", } }
        : {
            show: false,
          },
    },
    grid: options.grid,
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          margin: options.yAxisAxisLabelMargin
            ? options.yAxisAxisLabelMargin
            : 8,
          textStyle: {
            color: "#e2e2e2",
            fontSize: 12 * options.textRate,
          },
          // 文字垂直对齐方式，默认自动 top\ middle\ bottom
          verticalAlign: options.yAxisVerticalAlign
            ? options.yAxisVerticalAlign
            : "",
          // 文字水平对齐方式，默认自动 left\ center\ right
          align: options.yAxisAlign ? options.yAxisAlign : "",
          // 文字块的内边距
          padding: options.yAxisAlignPadding
            ? options.yAxisAlignPadding
            : [0, 0, 0, 0],
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
        },
        data: options.yName,
      },
      options.isValueRight
        ? {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              // show: options.isLabel,
              // // align: 'left',
              // // margin: 10,
              // verticalAlign: 'bottom',
              // align: 'center',
              // padding: [0, 0, -7, 10],
              // padding: [0, 80, 10, 0],
              textStyle: {
                fontSize: 12 * options.textRate,
                color: options.labelColor,
              },
            },
            data: options.data.map((item) => {
              return item.value + options.util;
            }),
          }
        : "",
    ],
    color: ["rgba(255,204,0,1)", "rgba(255,204,0,0)"],
    series: [
			...series
    ],
  };
};

// 仪表板
export const gaugeOptions = (options) => {
  return {
    series: [
      // 等级描述
      {
        name: "等级描述",
        type: "gauge",
        radius: "98%",
        center: ["50%", "60%"],
        splitNumber: 130, //刻度数量
        min: 0,
        max: 130,
        z: 0,
        axisLabel: {
          show: true,
          color: "#4E5969",
          fontSize: 12,
          distance: -65,
          formatter: function (value) {
            if (value == 0) {
              return "";
            } else if (value == 18) {
              return "三级预警";
            } else if (value == 38) {
              return "二级预警";
            } else if (value == 52) {
              return "一级预警";
            } else if (value == 100) {
              return "无需预警";
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        }, //刻度样式
        splitLine: {
          show: false,
        }, //分隔线样式
        detail: {
          show: false,
        },
      },
      // 大白底
      {
        type: "pie",
        radius: "98%",
        selectedMode: false,
        center: ["50%", "60%"],
        z: 0,
        itemStyle: {
          normal: {
            color: "#ffffff",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        emphasis: {
          disabled: true,
        },
        hoverAnimation: false,
        label: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        data: [100],
      },

      // 刻度  仪表盘
      {
        name: "刻度",
        type: "gauge",
        radius: "90%",
        z: 500,
        min: 0,
        max: 130,
        center: ["50%", "60%"],
        splitNumber: 5, //刻度数量
        pointer: {
          //仪表盘指针
          icon: "circle",
          length: 14,
          width: 14,
          roundCap: true,
          offsetCenter: [0, "-96%"],
          itemStyle: {
            color: "transparent",
            borderCap: "round",
            borderColor: "#fff",
            borderWidth: "6",
          },
        },

        axisLine: {
          show: true,
          distance: 10,
          lineStyle: {
            width: 10,
            color: [
              [36 / 130, "#e64232"],
              [47 / 130, "#f87c29"],
              [68 / 130, "#f2af25"],
              [1, "#2ebb39"],
            ],
          },
        }, //仪表盘轴线
        axisLabel: {
          show: true,
          color: "#4E5969 ",
          distance: 15,
          fontSize: 12,
        }, //刻度标签。
        axisTick: {}, //刻度样式
        splitLine: {}, //分隔线样式
        title: {
          color: "#4E5969",
          offsetCenter: [0, "15%"],
          fontSize: 12,
        },
        detail: {
          formatter: function (value) {
            return "{bule|" + value + "}";
          },
          rich: {
            bule: {
              fontSize: 24,
              fontFamily: "Microsoft YaHei, Microsoft YaHei",
              color: "#1D2129",
              fontWeight: "bold",
            },
          },
          offsetCenter: ["0%", "-5%"],
        },
        data: [
          {
            name: "心理健康指数",
            value: 36,
          },
        ],
      },
      // 白圈
      {
        type: "pie",
        radius: ["45%", "48%"],
        selectedMode: false,
        center: ["50%", "60%"],
        z: 0,
        itemStyle: {
          normal: {
            color: "#f1f5ff",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        emphasis: {
          disabled: true,
        },
        hoverAnimation: false,
        label: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        data: [100],
      },
      // 内部底色圈
      {
        type: "pie",
        radius: "40%",
        selectedMode: false,
        center: ["50%", "60%"],
        z: 100,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
              {
                offset: 0,
                color: "#ffffff",
              },
              {
                offset: 0.2,
                color: "#e8efff",
              },
              {
                offset: 0.5,
                color: "#fff",
              },
              {
                offset: 0.8,
                color: "#e8efff",
              },
              {
                offset: 1,
                color: "#e8efff",
              },
            ]),
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        emphasis: {
          disabled: true,
        },
        hoverAnimation: false,
        label: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        data: [100],
      },
    ],
  };
};
// 雷达图 配置
export const radarOptions = (options) => {
  let seriesOptions = {
    type: "radar",
    symbol: options.symbol ? options.symbol : 'circle',
    symbolSize: 5,
    areaStyle: {
      color: options.areaColor,
      opacity: 0.2,
    },
  };
  let setLegend = () => {
    if (options.isBarAndLine) {
      return {
        itemHeight: options.legendItemHeight,
        itemWidth: options.legendItemWidth,
        borderWidth: 0,
        icon: options.legendIcon,
      };
    }
    return {};
  };
  return {
    title: options.echartTitle ? options.echartTitle : {show: false},
    tooltip: options.tooltip ? options.tooltip : {},
    legend: options.isLength
        ? Object.assign(
            {
              data: options.legendData ? options.legendData : null,
              orient: options.orient ? options.orient : "horizontal",
              show: true,
              left: options.legendLeft,
              top: options.legendTop,
              selected: options.selectedList,
              itemHeight: options.legendItemHeight,
              itemWidth: options.legendItemWidth,
              borderWidth: 0,
              icon: options.icon ? options.icon : 'circle',
              textStyle: {
                color: options.legendColor,
                fontSize: options.legendSize,
                fontFamily: "Noto Sans",
              },
            },
            setLegend()
        )
        : null,
    radar: {
      shape: options.shape ? options.shape : "polygon",
      indicator: options.radarData.indicator,
      splitNumber: options.splitNumber ? options.splitNumber : 6,
      splitLine: options.splitLine ? options.splitLine : {
        show: true,
        lineStyle: {
          color: 'rgba(198,211,236,0.5)',
        },
      },
      center: options.center ? options.center : ["40%", "60%"],
      radius: options.radius ? options.radius : '70%',
      axisLabel: options.axisLabel ? options.axisLabel : {
        show: false,
      },
      splitArea: options.splitArea ? options.splitArea : {
        show: false,
      },
      axisLine: options.axisLine ? options.axisLine : {
        lineStyle: {
          color: "#fff",
        },
      },
      nameGap: options.nameGap ? options.nameGap : 15,
      name: options.hasName ? {
        formatter: function (name) {
          let value = 0;
          options.indicator.forEach((item) => {
            if (item.name === name) {
              value = item.value;
            }
          });
          return `{a|${name}}\n{b| ${value}${options.util}}`;
        },
        rich: {
          a: {
            color: "#727375",
            fontFamily: "Noto Sans",
            fontSize: 13,
            padding: [0, 0, 4, 0],
            fontWeight: 500,
          },
          b: {
            color: "#3578AD",
            fontFamily: "Noto Sans",
            fontSize: 13,
            fontWeight: 500,
          },
        },
        textStyle: {
          fontFamily: "Noto Sans",
          fontSize: 13,
          fontWeight: 500,
        },
      } : {},
    },
    series: [{...seriesOptions, data: [...options.radarData.data]}],
  };
};
//折线图和柱状图
export const lineAndBarOptions = options => {
  if (options.clickFn) {
    window.clickFn = options.clickFn;
  }

  let axisLabel = {
    color: options.axisLabelColor,
    interval: 0,
    textStyle: {
      fontSize: options.axisLabelSize * options.textRate,
      fontFamily: "Noto Sans",
    },
  };
  let setLegend = () => {
    if (options.isBarAndLine) {
      return {
        itemHeight: options.legendItemHeight,
        itemWidth: options.legendItemWidth,
        borderWidth: 0,
        icon: options.legendIcon,
      };
    }
    return {};
  };
  let barLineAry = [];

  let series =
      options.datas &&
      options.datas.map((item) => {
        let typeOptions = () => {
          if (item.type === "bar") {
            // 判断柱形图是否有斜线
            if (item.hasLine) {
              barLineAry.push({
                type: "pictorialBar",
                itemStyle: {
                  normal: {
                    color: "#072342",
                  },
                },
                symbolRepeat: "fixed",
                symbolMargin: 3,
                symbol: "rect",
                symbolClip: true,
                symbolSize: [options.barWidth, 2],
                symbolRotate: options.symbolRotate,
                symbolPosition: "start",
                data: item.data,
                width: 10,
                z: 0,
                zlevel: 1,
              });
            }
            return {
              barWidth: options.barWidth,
              zlevel: 0,
              markPoint: item.hasMarkPoint ? {
                show: true,
                symbolSize: [12, 12],
                symbolOffset: [0, 6],
                data: item.data.map((item, idx) => {
                  return {
                    name: 'item' + idx,
                    coord: [idx, item]
                  }
                })
              } : null,
              itemStyle: {
                emphasis: {
                  borderColor:
                      typeof item.color === "string" ? item.color : item.color[0],
                  borderWidth: 1,
                  borderRadius: [10, 10, 0, 0],
                },
                normal: {
                  barBorderRadius: options.barBorderRadius,
                },
              },
            };
          } else {
            if (item.isArea) {
              return {

                areaStyle: {
                  normal: {
                    color: {
                      type: "linear", //线性渐变 radial径向渐变
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: item.color[0],
                        },
                        {
                          offset: 1,
                          color: item.color[1],
                        },
                      ],
                    },
                  },
                },
                lineStyle: {
                  with: 2,
                },
              };
            } else {
              return {
                lineStyle: {
                  opacity: 1,
                  type: "solid",
                  width: 2,
                },
              };
            }
          }
        };
        return {
          ...item,

          color:
              typeof item.color === "string"
                  ? item.color
                  : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: item.color[0]},
                    {offset: 1, color: item.color[1]},
                  ]),
          ...typeOptions(),
        };
      });
  return {
    title: Object.keys(options.echartTitle).length ? options.echartTitle : {},
    dataZoom: options.dataZoom ? options.dataZoom : [],
    tooltip: {
      confine: true,
      show: options.isShowTooltip,
      showContent: true,
      textStyle: {
        color: "#fff",
      },
      position: options.tooltipPosition ? function (point, params, dom, rect, size) {
        return [point[0] - 70, point[1] - 190];
      } : null,
      enterable: true,
      hideDelay: 200,
      trigger: options.trigger, // 有修饰的柱形图，需要区别无效的数据 axis都显示  item 显示一个
      backgroundColor: "rgba(3, 15, 46, .8)", //tooltip背景色
      borderColor: "rgba(3, 15, 46, .5)", //tooltip边框颜色
      borderWidth: 1,
      extraCssText: 'z-index: 99',
      axisPointer: {
        type: "shadow"
      },
      formatter: options.tooltipFormatter ? function (params) {
        let result = params[0].name + '<br>';
        params.forEach(function (item) {
          result +=
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
              item.color.colorStops[0].color +
              '"></span>';
          result += item.seriesName + ': ' + item.data + options.tooltipFormatter + '<br>'
        });
        return result
      } : ''
    },
    grid: {...options.grid},
    legend: options.isLength
        ? Object.assign(
            {
              data: options.legendData ? options.legendData : null,
              orient: options.orient ? options.orient : "horizontal",
              show: true,
              itemGap: 4,
              left: options.legendLeft,
              selected: options.selectedList,
              textStyle: {
                color: options.legendColor,
                fontSize: options.legendSize * options.textRate,
                fontFamily: "Noto Sans",
              },
            },
            setLegend()
        )
        : null,
    xAxis: {
      type: "category",
      boundaryGap: options.boundaryGap ? options.boundaryGap : false,
      name: options.xAxisName,
      nameTextStyle: {
        // color: options.yAxisColor,
        fontSize: 12,
        lineHeight: 12,
        padding: [0, 10, 0, 0],
      },
      data: options.xAxis,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: options.isAxisLine,
        lineStyle: {
          color: options.axisLineColor,
        },
      },
      axisLabel: {
        color: options.axisLabelColor,
        rotate: options.rotate,
        // interval: 0,
        margin: 10,
        textStyle: {
          fontSize: 12,
        },
      },
    },
    yAxis: [{
      type: "value",
      scale: options.isScale,
      name: options.yAxisName,
      nameTextStyle: {
        color: options.yAxisColor,
        fontSize: 13,
        lineHeight: 12,
        padding: [0, 10, 0, 0],
      },
      max: options.maxYAxis !== undefined ? function (value) {
        if (value.max > options.maxYAxis) {
          return parseFloat(value.max);
        } else {
          return parseFloat(options.maxYAxis);
        }
      } : null,
      min: options.minYAxis !== undefined ? function (value) {
        if (value.min < options.minYAxis) {
          return Math.floor(value.min);
        } else if (value.min > options.maxYAxis) {
          return parseFloat(options.maxYAxis);
        } else {
          return Math.floor(options.minYAxis);
        }
      } : null,
      axisLine: {
        show: options.isYAxisLine,
        lineStyle: {
          color: options.axisLineColor,
        },
      },
      splitLine: {
        show: options.splitLineY,
        lineStyle: {
          type: [2, 2],
          color: options.splitLineColor,
        },
      },
      axisLabel,
      splitNumber: options.splitNumber,
    }, options.doubleY ? {
      type: "value",
      name: options.yAxisName2,
      nameTextStyle: {
        color: options.yAxisColor,
        fontSize: 12 * options.textRate,
        lineHeight: 12,
        padding: [0, 10, 0, 0],
      },
      max: options.maxYAxis2 != undefined ? function (value) {
        if (value.max > options.maxYAxis2) {
          return parseFloat(value.max);
        } else {
          return parseFloat(options.maxYAxis2);
        }
      } : null,
      min: options.minYAxis2 != undefined ? function (value) {
        if (value.min < options.minYAxis2) {
          return parseFloat(value.min);
        } else if (value.min > options.maxYAxis) {
          return parseFloat(options.maxYAxis);
        } else {
          return parseFloat(options.minYAxis2);
        }
      } : null,
      axisLine: {
        show: options.isYAxisLine,
        lineStyle: {
          color: options.axisLineColor,
        },
      },
      splitLine: {
        show: options.splitLineY2,
        lineStyle: {
          type: [2, 2],
          color: options.splitLineColor,
        },
      },
      splitNumber: options.splitNumber2,
      axisLabel
    } : null],
    series: [...series, ...barLineAry],
  };
};


// 极坐标柱形图
export const polarBarOptions = (options) => {
	let arr = options.data.map((originalItem, index) => {
		// 创建一个新数组，用map遍历原始数组的每个元素
		return options.data.map((_, currentIndex) => {
			// 如果当前索引与原始项的索引匹配，则使用原始项并添加itemStyle
			if (currentIndex === index) {
				return {
					...originalItem,
					itemStyle: { color: options.color[index] }
				};
			} else {
				// 否则，设置一个value为0且itemStyle为透明的对象
				return {
					value: 0,
					name: options.data[currentIndex].name,
					itemStyle: { color: 'transparent' }
				};
			}
		})
	})
	let series = options.data.map((item, index) => {
		return {
			type: "bar",
			name: item.name,
			data: arr[index],
			z: 9,
			coordinateSystem: "polar",
			itemStyle: {
				color: options.color[index]
			},
			trigger: "item"
		}
	})
	return {
		legend: {
			show: true,
			top: 'center',
			enabled: true,
			orient: options.orient,
			left: options.legendLeft,
			icon: "circle",
			itemGap: options.legendItemGap,
			itemWidth: 10,
			itemHeight: 10,
			formatter: (name) => {
				let len = options.data.length;
				if (len) {
					let value, rate;
					for (let i = 0, l = len; i < l; i++) {
						if (options.data[i].name == name) {
							value = options.data[i].value;
							rate = options.data[i].rate;
						}
					}
					return `{b|${name}}{a|${value}${options.legendUnit}}`;
				}
			},
			textStyle: {
				...textStyle,
				rich: {
					b: { color: "#666", align: 'left', width: 90, fontFamily: "'微软雅黑', sans-serif" },
					a: { align: "right", color: '#333', width: 60, fontFamily: "'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif" },
					rate: {color: '#333', align: 'right', width: 60, fontFamily: "'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif"}
				}
			}
		},
		tooltip: {
			show: true
		},
		angleAxis: {
			type: 'category',
			axisLabel: {show: false},
			axisTick: {show: false},
			min: options.angleAxisMin,
			data: options.angleAxis
		},
		radiusAxis: {},

		polar: {
			radius: [0, '90%'],
			center: ['20%', '50%']
		},
		series
	};
}
